<template>
  <div class="container">
    <div class="container-row">
      <div id="myChart" :style="{ width: '400px', height: '300px' }"></div>
      <div id="myChartPie" :style="{ width: '400px', height: '300px' }"></div>
      <div
        id="myChartUserPie"
        :style="{ width: '400px', height: '300px' }"
      ></div>
    </div>
    <div id="myChartBar" :style="{ width: '100%', height: '300px' }"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from "vue";
import * as echarts from "echarts"; 
import {
  getAllRoomList,
  getAllUserList,
  getAllUserRoomNumber,
  getCostDataAnalysis,
} from "@/api";

export default defineComponent({
  components: {},
  setup() {
    const allUserRoomNumber = ref([]);
    const allRoomNumberType = ref([] as any);
    const allUserNumberType = ref([] as any);
    const monthList = ref([] as any);
    const totalCost = ref([] as any);
    const rent = ref([] as any);
    const healthList = ref([] as any);
    const managementList = ref([] as any);
    const elevatorList = ref([] as any);
    const sharedElectyList = ref([] as any);
    const electyRateList = ref([] as any);
    const waterRateList = ref([] as any);
    const form = reactive({
      month: 0,
      year: 0,
    });
    const initUserRoomNumer = async () => {
      await getAllUserRoomNumber().then((res) => {
        allUserRoomNumber.value = res;
        initEcharts();
      });
    };
    const initRoomNumber = async () => {
      await getAllRoomList().then((res) => {
        let res1 = [];
        let res2 = [];
        let res3 = [];
        res1 = res.filter((item: any) => {
          return item.roomType == 1;
        });
        allRoomNumberType.value.push({ value: res1.length, name: "精修" });
        res2 = res.filter((item: any) => {
          return item.roomType == 2;
        });
        allRoomNumberType.value.push({ value: res2.length, name: "简约" });
        res3 = res.filter((item: any) => {
          return item.roomType == 3;
        });
        allRoomNumberType.value.push({ value: res3.length, name: "复式" });

        initEchartsPie();
      });
    };
    const initUserNumber = async () => {
      await getAllUserList().then((res) => {
        let res1 = [];
        let res2 = [];
        res1 = res.filter((item: any) => {
          return item.userType == 1;
        });
        allUserNumberType.value.push({ value: res1.length, name: "物业" });
        res2 = res.filter((item: any) => {
          return item.userType == 0;
        });
        allUserNumberType.value.push({ value: res2.length, name: "租客" });
        initEchartsUserPie();
      });
    };
    const addTime = () => {
      let aDate = new Date();
      form.month = aDate.getMonth() + 1;
      form.year = aDate.getFullYear();
    };
    const initDataStatistics = async () => {
      await getCostDataAnalysis(form.year, form.month).then((res) => {
        res.sort((a: any, b: any) => {
          return a.roomNumber - b.roomNumber;
        });
        res.forEach((item: any) => {
          monthList.value.push(item.roomNumber + "室");
          totalCost.value.push(item.total);
          rent.value.push(item.rent);
          healthList.value.push(item.health);
          managementList.value.push(item.management);
          elevatorList.value.push(item.elevator);
          sharedElectyList.value.push(item.sharedElecty);
          electyRateList.value.push(item.electyRate);
          waterRateList.value.push(item.waterRate);
          initEchartsBar();
        });
      });
    };
    const initEcharts = () => {
      let myChart = echarts.init(document.getElementById("myChart") as any);
      // 绘制图表
      myChart.setOption({
        title: {
          text: "用户以及房间总数",
        },
        tooltip: {},
        legend: {
          show: true,
          top: "30px",
        },
        xAxis: {
          data: ["用户总数", "房间总数"],
        },
        yAxis: {},
        series: [
          {
            name: "总数",
            type: "bar",
            data: allUserRoomNumber.value,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否在图上展示数据 // position:'top',//数据在柱状图顶部显示
                  textStyle: {
                    color: "#fff", //数据颜色
                  },
                },
              },
            },
          },
        ],
      });
      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    };
    const initEchartsPie = () => {
      let myChart = echarts.init(document.getElementById("myChartPie") as any);
      // 绘制图表
      myChart.setOption({
        title: {
          text: "房间类型总数",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "总数",
            type: "pie",
            data: allRoomNumberType.value,
            radius: "50%",
            label: {
              normal: {
                formatter: "{b}({d}%)",
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    };
    const initEchartsUserPie = () => {
      let myChart = echarts.init(
        document.getElementById("myChartUserPie") as any
      );
      // 绘制图表
      myChart.setOption({
        title: {
          text: "用户类型总数",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "总数",
            type: "pie",
            data: allUserNumberType.value,
            radius: "50%",
            label: {
              normal: {
                formatter: "{b}({d}%)",
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    };
    const initEchartsBar = () => {
      let myChart = echarts.init(document.getElementById("myChartBar") as any);
      // 绘制图表
      myChart.setOption({
        title: {
          text: "当月每户支出费用情况",
        },
        tooltip: {},
        legend: {
          show: true,
          top: "30px",
          data: [
            "总费用",
            "租金",
            "卫生费",
            "管理费",
            "电梯费",
            "公摊水电费",
            "电费",
            "水费",
          ],
        },
        grid: {
          top: "120px", //柱状图距离父容器div顶端的距离
          left: "20px", //柱状图距离父容器div左端的距离
          right: "20px", //柱状图距离父容器div右端的距离
          bottom: "20px", //柱状图距离父容器div底端的距离
          containLabel: true, //grid 区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          data: monthList.value,
        },
        yAxis: {},
        series: [
          {
            name: "总费用",
            type: "bar",
            // emphasis: { //鼠标放上去隐藏其他
            //   focus: "series",
            // },
            data: totalCost.value,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否在图上展示数据 // position:'top',//数据在柱状图顶部显示
                  position: "top",
                  rotate: 70,
                  align: "left",
                  textStyle: {
                    color: "#000000", //数据颜色
                  },
                },
              },
            },
          },
          {
            name: "租金",
            type: "bar",
            data: rent.value,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否在图上展示数据 // position:'top',//数据在柱状图顶部显示
                  position: "top",
                  rotate: 70,
                  align: "left",
                  textStyle: {
                    color: "#000000", //数据颜色
                  },
                },
              },
            },
          },
          {
            name: "卫生费",
            type: "bar",
            data: healthList.value,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否在图上展示数据 // position:'top',//数据在柱状图顶部显示
                  position: "top",
                  rotate: 70,
                  align: "left",
                  textStyle: {
                    color: "#000000", //数据颜色
                  },
                },
              },
            },
          },
          {
            name: "管理费",
            type: "bar",
            data: managementList.value,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否在图上展示数据 // position:'top',//数据在柱状图顶部显示
                  position: "top",
                  rotate: 70,
                  align: "left",
                  textStyle: {
                    color: "#000000", //数据颜色
                  },
                },
              },
            },
          },
          {
            name: "电梯费",
            type: "bar",
            data: elevatorList.value,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否在图上展示数据 // position:'top',//数据在柱状图顶部显示
                  position: "top",
                  rotate: 70,
                  align: "left",
                  textStyle: {
                    color: "#000000", //数据颜色
                  },
                },
              },
            },
          },
          {
            name: "公摊水电费",
            type: "bar",
            data: sharedElectyList.value,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否在图上展示数据 // position:'top',//数据在柱状图顶部显示
                  position: "top",
                  rotate: 70,
                  align: "left",
                  textStyle: {
                    color: "#000000", //数据颜色
                  },
                },
              },
            },
          },
          {
            name: "电费",
            type: "bar",
            data: electyRateList.value,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否在图上展示数据 // position:'top',//数据在柱状图顶部显示
                  position: "top",
                  rotate: 70,
                  align: "left",
                  textStyle: {
                    color: "#000000", //数据颜色
                  },
                },
              },
            },
          },
          {
            name: "水费",
            type: "bar",
            data: waterRateList.value,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否在图上展示数据 // position:'top',//数据在柱状图顶部显示
                  position: "top",
                  rotate: 70,
                  align: "left",
                  textStyle: {
                    color: "#000000", //数据颜色
                  },
                },
              },
            },
          },
        ],
      });
      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    };
    onMounted(() => {
      addTime();
      initUserRoomNumer();
      initRoomNumber();
      initUserNumber();
      initDataStatistics();
    });
    return {
      form,
      monthList,
      totalCost,
      rent,
      healthList,
      managementList,
      elevatorList,
      sharedElectyList,
      electyRateList,
      waterRateList,
      allUserRoomNumber,
      allRoomNumberType,
    };
  },
});
</script>

<style lang="scss" scoped>
.container {
  &-row {
    display: flex;
    flex-wrap: wrap;
    div{
      flex: 1;
    }
  }
}
</style>